<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
  <caption>个人信息</caption>
  <tr><td>照片：</td><td id="head_td"></td></tr>
  <tr><td>姓名：</td><td id="name_td"></td></tr>
  <tr><td>年龄：</td><td id="age_td"></td></tr>
  <tr><td>好友们：</td><td id="friend_td"></td></tr>

</table>
<input type="button" value="加载数据" onclick="f()"/>
</body>
<script>
  let headTd = document.querySelector("#head_td");
  let nameTd = document.querySelector("#name_td");
  let ageTd = document.querySelector("#age_td");
  let friendTd = document.querySelector("#friend_td");

  function f(){
    //模拟从服务器得到的一个人的信息
/*
    let p = {name:"传奇哥",age:18,imgUrl:"../b.jpg",friends:["西施","貂蝉","蔡文姬"]};
*/
    let p = {};
    p.name = "传奇哥";
    p.age = 18;
    p.imgUrl = "../b.jpg";
    p.friends = ["西施","貂蝉","蔡文姬"];
    //创建图片标签
    let img = document.createElement("img");
    img.src=p.imgUrl;
    img.width = 100;
    headTd.append(img);//把图片装进td
    //把对象中的数据装进td
    nameTd.innerText = "<h1>"+p.name+"</h1>";
    ageTd.innerText = p.age;

    let ul = document.createElement("ul");//创建ul和li
    //遍历好友数组
    for(let f of p.friends){
      let li = document.createElement("li");//创建li
      li.innerText = f;//给li设置显示的内容为遍历的好友名
      ul.append(li);//把li装进ul
    }
    friendTd.append(ul);//把ul装进td

  }

</script>
</html>